<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/include/base.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<link rel="shortcut icon" href="img/favicon.png"/>
<script  type="text/javascript"	src="${APP_PATH }/static/js/pageListComm.js"></script>
<script  type="text/javascript"	src="static/js/pageComm.js"></script>
<script type="text/javascript">
var currentPage;		
		$(function(){
			//到第一页
			to_page(1);
			
			$(document).on("click",".configUserPower",function(){
				//设置模态框标题
				$("#powerLabel").text("角色配置");
				//显示负责人
				$("#userId").val($(this).attr("userId"));
				$("#username").val($(this).attr("username"));
				//加载所有的角色
				getAllRole("${APP_PATH}/roless","#checkboxRolePower");
				//alert($(this).attr("userId"));
				//获取该用户 已配置的的所有的角色
				getAllRoleByUserId("${APP_PATH}/roleGroup/"+$(this).attr("userId"));
				//打开模态框
				$("#powerModal").modal({
					backdrop: "static"
				});
			})
			
			$("#saveUserRole").click(function(){
				var inputRoles=$("#checkboxRolePower input:checkbox:checked");
				//alert(inputRoles.size());
				//alert($("#userId").val())
			
				var  roleIds= new Array(inputRoles.size());
				$(inputRoles).each(function(index,item){
					//alert(item.value)
					roleIds[index]=item.value;
				});
				var data="roleIds="+roleIds+"&userId="+$("#userId").val();
				//alert(data);
				$.ajax({
					url:"${APP_PATH}/roleGroup",
					type:"PUT",
					data:data,
					success:function(result){
						 if(result.code == 200){
							 //显示失败消息  失败
							 alert(result.extend.msg);
							 //关闭模态框
						 }else{
							// 返回当前页
							 to_page(currentPage);
						 }
			
						//关闭模态框
						$("#powerModal").modal("hide");
					}
				});
			});
			
			
		});
		
		//获取该用户 已配置的的所有的角色
		function getAllRoleByUserId(url){
			$.ajax({
				url:url,
				type:"GET",
				success:function(result){
					
					showRoleFrom(result.extend.list);
				}
			});
		}
		
		//显示角色信息
		function showRoleFrom(list){
			//alert(list.length);
			//alert($("#checkboxRolePower input:checkbox").size())
			$("#checkboxRolePower input:checkbox").each(function(index,item){
				
				for(var i=0; i< list.length ;i++){
					//alert(list[i].roleId +" ----->  "+ item.value)
					if(list[i].roleId == item.value ){
						$(this).attr("checked","checked");
					}
				}
				
			});
		}
		
		
		//获取所有的角色 并显示在多选框里面
		function getAllRole(url,ele){
			$(ele).empty();
			$.ajax({
				url:url,
				type:"GET",
				success:function(result){
					
					$.each(result.extend.list,function(index,item){
						//alert(item.power);
						
						$(ele).append($("<div class=checkbox'><label></label></div>")
								.append($("<input type='checkbox'></input>")
										.attr("name","power")
										.val(item.id))
								.append(item.roleName));
						
					});
				}
			});
		}
		getRoleByRoleId("${APP_PATH}/role/"+$(this).attr("roleId"));
		
		 function getPowerByModuleId(url,ele){
				$(ele).empty();
				$.ajax({
					url:url,
					type:"GET",
					success:function(result){
						
						$.each(result.extend.list,function(index,item){
							//alert(item.power);
							//alert(item.powerName);
							$(ele).append($("<div class=checkbox'><label></label></div>")
									.append($("<input type='checkbox'></input>")
											.attr("name","power")
											.val(item.power))
									.append(item.powerName));
							
						});
					}
				});
			} 
		
function to_page(pn){
			//alert(pn)
			$.ajax({
				url:"${APP_PATH}/users",
				data:"pn="+pn,
				type:"GET",
				success:function(result){
					//2. 解析并显示分页数据
	 				  build_page_info(result);
	 				 //3解析显示分页条
	 				  build_page_nav(result);
	      				//1. 解析并显示员工数据
	 				 build_emps_table(result);
	      				
				}
			});
		}

		//1. 解析并显示员工数据
			function build_emps_table(result){
				//清空table表格
		  		$("#userPowerTable tbody").empty();
				//获取返回的dept值
				var users=result.extend.pageInfo.list;
			
                  $.each(users,function(index,item){
						
						var idTd=$("<td ></td>").append(item.id);
						var usernameTd=$("<td ></td>").append(item.username);
						var editBtn=$("<a></a>").addClass("btn btn-primary configUserPower").append("配置");
						editBtn.attr("userId",item.id);
						editBtn.attr("username",item.username);
						var btnGroupTd=$("<td style='text-align:center;'></td>").append($("<div></div>"));
						btnGroupTd.append(editBtn);
						
						$("<tr align='center'></tr>").append(idTd)
									  .append(usernameTd)
									  .append(btnGroupTd)
									  .appendTo($("#userPowerTable tbody"));
						
						
					});
		  	}
		
		</script>
</head>


  <body>
  <!-- 模态框 -->
  <%@include file="/WEB-INF/include/powerModal.jsp" %>
  
  <!-- container section start -->
  <section id="container" class="">
      <%@include file="/WEB-INF/include/top.jsp"%>

      <%@include file="/WEB-INF/include/left.jsp"%>

      <!--main content start-->
      <section id="main-content" >
          <section class="wrapper">
		  <div class="row">
				<div class="col-lg-12">
					<ol class="breadcrumb">
						<li><i class="fa fa-home"></i><a href="index.jsp">权限管理</a></li>
						<li><i class="fa fa-table"></i>角色管理</li>
					</ol>
					
				</div>
			</div>
	          
             
            
            
              <div class="row" align="center" style="margin:0 auto">
                  <div class="col-lg-12">
                      <section class="panel">
                      
                        <table class="table table-striped table-advance table-hover" id="userPowerTable">
                          <thead>
                          	  <tr>
                          	  	<th width="35%" style="text-align:center;">人员ID</th>
                                 <th width="32%" style="text-align:center;">人员姓名</th>
                                 <th width="33%" style="text-align:center;">操作</th>
    
                              </tr>
                          </thead>
                           <tbody></tbody>
                           <tfoot>
                           <tr><td colspan="5">
                           
                    <div class="row " >
			<!--分页文字信息  -->
			<div class="col-md-6" id="page_info_area"></div>
			<!-- 分页条信息 -->
			<div class="col-md-6" id="page_nav_area" ></div>
		</div>       
                           
                           </td></tr>
        
                           </tfoot>
                        </table>
                        
                        
                      </section>
                  </div>
              </div>
              
              
          </section>
      </section>
      <!--main content end-->
  </section>
  <!-- container section end -->
    <!-- javascripts -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- nicescroll -->
    <script src="js/jquery.scrollTo.min.js"></script>
    <script src="js/jquery.nicescroll.js" type="text/javascript"></script>
    <!--custome script for all page-->
    <script src="js/scripts.js"></script>


  </body>
</html>
